<template>
    <div class="role">
        <!-- 面包屑导航 -->
        <breadcrumb :breadcrumbList='breadcrumbList'></breadcrumb>
        <!-- //选项卡 -->
          <el-tabs  class="el-tabs"  v-model="activeName" type="card">
              <el-tab-pane
                label="今日营销数据"
                name="first"
              >
              <!-- //搜搜框 -->
               <mysearchfrom  @search="search" :keylist='keylist' :searchlist='searchlist'></mysearchfrom>
               <!-- //卡片 -->
               <shopcard></shopcard> 
             </el-tab-pane>
         </el-tabs>
         <div class="roletom">
             <div class="left">
                  <!-- 折线图 -->
                  <echartsline></echartsline>
             </div>
             <div class="right">
                 <usercard></usercard>
             </div>
         </div>    
    </div>
</template>
<script>
import  breadcrumb from "@/components/breadcrumb"
import mysearchfrom from "@/components/mysearchfrom"
import shopcard from "@/views/main/system/role/components/shopcard"
import echartsline from "./components/line"
import usercard from "./components/usercard"
export default {
    name:'role',
    data(){
        return {
            okbtn:true,
            activeName:'first',
            breadcrumbList:[{name:'营销状况'}],
            keylist:[{name:'确定',colorok:true,fun:'search'},{name:"重置",colorok:false,fun:"delete"}],
            searchlist:[
                  {
                  label: "机构",
                  model: "",
                  placeholder: "请输入连锁机构名称",
                  type: "select",
                  options: [{
                     value: '选项1',
                     label: '黄金糕'
                   }, {
                     value: '选项2',
                     label: '双皮奶'
                   }, {
                     value: '选项3',
                     label: '蚵仔煎'
                   }, {
                     value: '选项4',
                     label: '龙须面'
                   }, {
                     value: '选项5',
                     label: '北京烤鸭'
                   }],
                },
                {
                  label: "日期",
                  model: "",
                  placeholder: "请选择日期",
                  type: "time",
                  }
            ]
        }
    },
    methods:{
        //搜搜
        search(){
            console.log(this.searchlist);
        },
        //取消
        delete(){}
    },
    components:{
        breadcrumb,
        mysearchfrom,
        shopcard,
        echartsline,
        usercard
    }
}
</script>
<style lang="less" scoped>
    .el-tabs {
        padding: 0 10px;
        padding-bottom: 30px;
        background-color: #FFFFFF;
    /deep/ .el-tabs__header {
    border-bottom: 1px solid #CCE9E6!important;
    }
    /deep/ .el-tabs__nav {
        border-top: 3px solid #009380!important;
        border-right: 1px solid #CCE9E6!important;
    }
    /deep/ .el-tabs__item.is-active {
      color: #333333; 
      font-weight: bold;
    }
  } 
  .role {
    position: relative;
      height: 100%;
      width: 100%;
      background-color: #F3F3F3; 
      .roletom {
          margin-top: 42px;
          display: flex;
          position: absolute;
          top: 320px;
          left: 0;
          right: 0;
          bottom: 0px;
          background-color: #fff;
          .left {
              width: 50%;
              height: 100%;
          } 
          .right {
            width: 50%;
          }
        
      }
  }

</style>